<!--
/**
 * 缴费名单详情
 * 缴费项目      节点扩展学生       选购项目
 *  1.。。        1.。。          1.。。 2.。。 3.。。
 *               2.。。          1.。。 2.。。 3.。。
 *               3.。。
 *  2.。。
 *  3.。。
 */
-->
<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--   缴费项目列表   -->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-collection"></i> 缴费清单 </span>
            <pagination
              :pagerCount="5"
              layout="total, prev, pager, next"
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getPaymentList"
            />
          </div>

          <el-table
            v-loading="loading"
            :data="payList"
            :height="tableHeight"
            highlight-current-row
            @row-click="getPayStu"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60" type="index"></el-table-column>

            <el-table-column label="缴费项目" align="center" prop="name"
                             :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!--   缴费学生列表   -->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-user-solid"></i> 缴费学生列表</span>
            <!--            <el-button-->
            <!--              style="float: right; padding: 3px 0"-->
            <!--              type="text"-->
            <!--              icon="el-icon-refresh-right"-->
            <!--              @click="refreshCacheKeys()"-->
            <!--            ></el-button>-->
          </div>
          <el-table
            v-loading="subLoading"
            :data="payStu"
            :height="tableHeight"
            highlight-current-row
            @row-click="handlePayValue"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60" type="index"></el-table-column>
            <el-table-column label="姓名" align="center" prop="studentName"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="金额" align="center" prop="totalPrice"
                             :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ (scope.row.totalPrice / 100).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 缴费项目详情 -->
      <el-col :span="8">
        <el-card style="height: calc(100vh - 125px)">
          <div slot="header">
            <span><i class="el-icon-document"></i> 缴费项目详情</span>
            <!-- 修改 -->
            <el-button
              style="float: right; padding: 3px 0"
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              @click="handleUpdateOpen"
              v-hasPermi="['uniquefees:stu_book:edit']"
            >{{ this.openItemEdit ? "保存" : "修改" }}
            </el-button>
          </div>
          <el-table
            ref="itemTable"
            v-loading="itemLoading"
            :data="payStuItem"
            :height="tableHeight"
            highlight-current-row
            style="width: 100%"
            :row-key="getItemRowKey"
            @row-click="clickRow"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" :selectable="selectableRow" :reserve-selection="true"
                             width="55"></el-table-column>
            <el-table-column label="序号" width="60" type="index"></el-table-column>
            <el-table-column label="选购项" align="center" prop="courseName"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="金额" align="center" prop="price"
                             :show-overflow-tooltip="true">
              <template slot-scope="scope">
                {{ (scope.row.price / 100).toFixed(2) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>


import {listBookList} from "@/api/uniquefees/bookList";
import {deptStuBook} from "@/api/uniquefees/stu_book";

export default {
  name: "Stu_book_index",
  components: {},
  dicts: ['sys_normal_disable', 'semester'],
  data() {
    return {
      // 缴费清单
      payList: [],
      payStu: [],
      payStuItem: [],
      selectedItems: [], // 包含选中项的唯一标识数组
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        semesterYear: null,
        semester: null,
        deptId: null,
        status: null,
        delFlag: null,
        sysOrgCode: null,
        code: null,
        name: null,
        school: null,
        college: null,
        major: null,
        clazz: null,
        grade: null,
        collegeId: null,
        schoolId: null,
        majorId: null,
        clazzId: null,
        headteacher: null,
        headteacherTel: null,
        headstudent: null,
        headstudentTel: null,
        issuanceDate: null,
        other: null,
        schoolYear: null,
        pricesum: null,
        booklistPic: null,
        bookListDetail: null
      },
      // 遮罩层
      loading: true,
      //学生
      subLoading: false,
      //缴费项目
      itemLoading: false,
      openItemEdit: false,
      tableHeight: window.innerHeight - 200
    };
  },
  created() {
    this.getPaymentList()
  },
  methods: {
    /** 查询缴费清单列表 */
    getPaymentList() {
      this.loading = true;
      listBookList(this.queryParams).then(response => {
        this.payList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**
     * 查询学生缴费项目
     * @param row
     */
    handlePayValue(row) {
      this.itemLoading = true;
      this.payStuItem = row.courses
      // this.selectedItems = row.courses.filter(item => item.subscribe === true);
      this.$nextTick(() => {
        this.$refs.itemTable.clearSelection()
        this.payStuItem.forEach((row) => {
          if (row.subscribe) {
            this.$refs.itemTable.toggleRowSelection(row);
          }
        });
      });
      this.itemLoading = false;
    },
    /** 单击选中行数据 */
    clickRow(row) {
      if (this.openItemEdit) {
        this.$refs.itemTable.toggleRowSelection(row);
      }

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedItems = selection.map((item) => item.courseId);
    },
    handleUpdateOpen() {
      this.openItemEdit = !this.openItemEdit;
    },
    selectableRow(row, index) {
      // 根据 selectAllRows 的值决定是否允许选择所有行
      return this.openItemEdit;
    },
    // 保存选中的数据编号
    getItemRowKey(row) {
      return row.courseId;
    },
    /**
     * 查询缴费学生
     * @param row
     */
    getPayStu(row) {
      this.payStuItem = []
      const queryParams = {
        deptId: null,
        scheduleId: row.id,
        semesterYear: null,
        semester: null
      }
      this.subLoading = true;
      deptStuBook(queryParams).then(response => {
        this.payStu = response.data.courseStu;
        this.subLoading = false;
      });
    }
  }
};
</script>
